<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Readdy - AI驱动的新一代网站构建平台</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #6366F1;
            --primary-dark: #4F46E5;
            --secondary: #10B981;
            --accent: #F59E0B;
            --dark: #1E293B;
            --light: #F8FAFC;
        }
        body {
            font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
            color: var(--dark);
            line-height: 1.6;
            background-color: #ffffff;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
        .hero-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .icon-box {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 1.5rem;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.75;
            margin-right: 1rem;
            margin-top: 0.5rem;
            color: var(--primary);
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-12 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                        <span class="block">用AI对话</span>
                        <span class="block">构建卓越网站</span>
                    </h1>
                    <p class="text-xl md:text-2xl opacity-90 mb-8 leading-relaxed">
                        无需设计经验，通过自然语言描述您的创意，<br>
                        Readdy为您生成专业级网站设计与代码
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://readdy.ai/" class="bg-white text-primary-dark font-bold py-4 px-8 rounded-lg text-lg hover:bg-opacity-90 transition duration-300 shadow-lg text-center">
                            立即免费试用 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white text-white font-bold py-4 px-8 rounded-lg text-lg hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">
                            了解功能 <i class="fas fa-info-circle ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                         alt="AI网站构建平台" 
                         class="rounded-xl shadow-2xl border-4 border-white border-opacity-20 w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section id="features" class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">释放创意，无需限制</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    Readdy将AI技术与专业网站设计完美结合，让每个人都能轻松创建令人惊艳的网站
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Feature 1 -->
                <div class="bg-white rounded-2xl p-8 shadow-md card-hover">
                    <div class="icon-box bg-primary bg-opacity-10 text-primary">
                        <i class="fas fa-comment-dots text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">AI对话式设计</h3>
                    <p class="text-gray-600">用自然语言描述需求，AI自动生成专业设计方案，就像与设计师对话一样简单</p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-white rounded-2xl p-8 shadow-md card-hover">
                    <div class="icon-box bg-secondary bg-opacity-10 text-secondary">
                        <i class="fas fa-rocket text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">一键发布</h3>
                    <p class="text-gray-600">支持即时发布到网络，或导出为代码/Figma文件，无缝对接您的开发流程</p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-white rounded-2xl p-8 shadow-md card-hover">
                    <div class="icon-box bg-accent bg-opacity-10 text-accent">
                        <i class="fas fa-code text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">生产级代码</h3>
                    <p class="text-gray-600">生成干净、高效、可直接部署的前端代码，告别二次开发困扰</p>
                </div>

                <!-- Feature 4 -->
                <div class="bg-white rounded-2xl p-8 shadow-md card-hover">
                    <div class="icon-box bg-purple-500 bg-opacity-10 text-purple-500">
                        <i class="fas fa-magic text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">智能优化</h3>
                    <p class="text-gray-600">自动优化设计细节和用户体验，确保您的网站在美观性和功能性上达到专业水准</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualized Process -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">Readdy如何工作？</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    三步完成专业网站创建，比传统方式快10倍
                </p>
            </div>

            <div class="mermaid">
                graph LR
                    A[描述您的需求] --> B[AI生成设计方案]
                    B --> C[调整与预览]
                    C --> D[发布或导出]
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-8">适用场景</h2>
                    <p class="text-lg text-gray-600 mb-8 drop-cap">
                        无论您是创业者、设计师还是开发者，Readdy都能为您提供强大的网站创建能力。创业团队可以快速搭建产品官网，设计师能够即时验证设计概念，开发者则能高效创建项目原型。
                    </p>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">创业团队快速构建产品官网，抢占市场先机</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">设计师快速验证设计概念，提高工作效率</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">开发者快速搭建项目原型，专注于核心功能开发</span>
                        </li>
                    </ul>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-4">典型用户案例</h3>
                            <div class="space-y-6">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-4">
                                        <i class="fas fa-lightbulb"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">创业团队</h4>
                                        <p class="text-gray-600">在48小时内从零构建完整的SaaS产品官网，包括产品展示、定价页面和联系表单</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-12 w-12 rounded-full bg-secondary bg-opacity-10 flex items-center justify-center text-secondary mr-4">
                                        <i class="fas fa-palette"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">UI设计师</h4>
                                        <p class="text-gray-600">快速生成3种不同风格的网站设计方案，向客户展示创意方向</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-12 w-12 rounded-full bg-accent bg-opacity-10 flex items-center justify-center text-accent mr-4">
                                        <i class="fas fa-laptop-code"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">开发者</h4>
                                        <p class="text-gray-600">用自然语言描述需求，生成React/Vue代码基础架构，节省项目初始化时间</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-primary text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好体验AI网站构建的未来了吗？</h2>
            <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
                Readdy让网站创建变得如此简单，任何人都能成为"设计师"。立即开始您的创意之旅！
            </p>
            <a href="https://readdy.ai/" class="inline-block bg-white text-primary-dark font-bold py-4 px-12 rounded-lg text-lg hover:bg-opacity-90 transition duration-300 shadow-lg">
                免费试用 <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>